<template>
	<view class="content">
		<view class="main">
			<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
			
			<view class="list_quan" v-for="(item,index) in data" :key="index">
				<view class="quan_left">
					
				</view>
				<view class="quan_center">
					<p style="width: 90%;margin: 0 auto;font-size: 30rpx;font-weight: bold;line-height: 50rpx;">{{item.coupon.title}}</p>
				<p style="width: 90%;height: 50%;margin: 0 auto;font-size: 18rpx;white-space: pre-wrap;">{{item.coupon.editors}}</p>
				</view>
				<view class="quan_right">
					<p style="margin-top: 30rpx;">￥<span style="font-size: 50rpx;">348</span></p>
					<p style="font-size: 30rpx;margin-top: 10rpx;">满6999元可用</p>
					<u-button @click="onindex()" text="待使用" :disabled="disabled" color="#B9B9B9" style="width: 80%;height: 50rpx;border-radius: 35rpx;margin-top: 10rpx;color: black;"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mycoupons
	} from "../../../api/api.js"
	import navgatsVue from '../../../common/navgats/navgats.vue';
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '租赁券',
				}, {
					name: '买断券'
				}],
				disabled:false,
				navigationMsg: {
					title: "使用记录",
					bgColor: "#ffffff"
				},
				data:[]
			}
		},
		components: {
			navgatsVue
		},
		onShow(){
			this.mycoupons()
		},
		methods: {
			onindex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			async mycoupons(){
				let res=await mycoupons()
				// console.log(res,"优惠券使用记录")
				
				this.data=res.data.data
				console.log(this.data)
			},
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style>
	* {
		font-size: 5vw;
		font-family: Microsoft JhengHei;

	}

	.content {
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		background-color: #F6F6F6;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		overflow-y: auto;
	}

	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tabs {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
	}
	.list_quan{
		width: 90%;
		height: 230rpx;
		/* background-color: aqua; */
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
	}
	.quan_left{
		width: 30%;
		height: 100%;
		background-color: #ffffff;
	}
	.quan_center{
		flex: 1;
		border-radius: 0 20rpx 20rpx 0  ;
		background-color: #ffffff;
	}
	.quan_right{
		width: 30%;
		height: 100%;
		background-color: #EFEFEF;
		/* border-left: 1px dashed #F2EE9D; */
		text-align: center;
	}
</style>